<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShoppingEase - 轻松购物平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB',
                        'light-3': '#C9CDD4'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
    <!-- 顶部通知栏 -->
    <div class="bg-primary text-white text-center py-1 px-4 text-sm">
        <p>全场满199元免运费 | 新用户注册立减50元 <a href="register.html" class="underline font-medium">立即注册</a></p>
    </div>

    <!-- 导航栏 -->
    <header id="navbar" class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16 md:h-20">
                <!-- Logo -->
                <a href="index.html" class="flex items-center space-x-2">
                    <i class="fa fa-shopping-bag text-primary text-2xl"></i>
                    <span class="text-xl font-bold text-primary">ShoppingEase</span>
                </a>

                <!-- 搜索栏 - 中等屏幕以上显示 -->
                <div class="hidden md:flex items-center flex-1 max-w-xl mx-8">
                    <div class="relative w-full">
                        <input type="text" id="search-input" placeholder="搜索商品、品牌或分类..." 
                            class="w-full py-2 pl-10 pr-4 rounded-full border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-light-3 hover:text-primary transition-colors">
                            <i class="fa fa-search"></i>
                        </button>
                        <button id="search-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white py-1 px-4 rounded-full hover:bg-primary/90 transition-colors">
                            搜索
                        </button>
                    </div>
                </div>

                <!-- 用户操作区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索按钮 - 小屏幕显示 -->
                    <button id="mobile-search-btn" class="md:hidden text-dark-2 hover:text-primary transition-colors">
                        <i class="fa fa-search text-xl"></i>
                    </button>
                    
                    <!-- 购物车 -->
                    <a href="cart.html" class="relative text-dark-2 hover:text-primary transition-colors">
                        <i class="fa fa-shopping-cart text-xl"></i>
                        <span id="cart-count" class="absolute -top-2 -right-2 bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
                    </a>
                    
                    <!-- 用户菜单 -->
                    <div id="user-menu-container" class="relative">
                        <!-- 未登录状态 -->
                        <div id="guest-menu" class="flex items-center space-x-2">
                            <a href="login.html" class="text-dark-2 hover:text-primary transition-colors">
                                <i class="fa fa-user-circle-o text-xl"></i>
                            </a>
                            <div class="hidden md:block">
                                <a href="login.html" class="text-dark-2 hover:text-primary transition-colors">登录</a>
                                <span class="text-light-3 mx-1">/</span>
                                <a href="register.html" class="text-dark-2 hover:text-primary transition-colors">注册</a>
                            </div>
                        </div>
                        
                        <!-- 已登录状态 -->
                        <div id="user-menu" class="hidden">
                            <button id="profile-btn" class="flex items-center space-x-2 text-dark-2 hover:text-primary transition-colors">
                                <i class="fa fa-user-circle text-xl"></i>
                                <span id="username-display" class="hidden md:inline">用户名</span>
                                <i class="fa fa-angle-down text-xs"></i>
                            </button>
                            <div id="profile-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50">
                                <a href="profile.html" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary transition-colors">
                                    <i class="fa fa-user-o mr-2"></i>个人中心
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i>我的订单
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary transition-colors">
                                    <i class="fa fa-heart-o mr-2"></i>我的收藏
                                </a>
                                <div class="border-t border-light-2 my-1"></div>
                                <a href="#" id="logout-btn" class="block px-4 py-2 text-sm text-danger hover:bg-light-1 transition-colors">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 移动端搜索框 - 默认隐藏 -->
            <div id="mobile-search-container" class="py-3 hidden">
                <div class="relative w-full">
                    <input type="text" placeholder="搜索商品、品牌或分类..." 
                        class="w-full py-2 pl-10 pr-4 rounded-full border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-light-3 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white py-1 px-4 rounded-full hover:bg-primary/90 transition-colors">
                        搜索
                    </button>
                </div>
            </div>

            <!-- 分类导航 -->
            <nav class="border-t border-light-2 py-2 hidden md:block">
                <ul class="flex justify-between items-center">
                    <li class="category-item relative group">
                        <a href="#" class="flex items-center space-x-2 text-dark font-medium">
                            <i class="fa fa-bars text-primary"></i>
                            <span>全部分类</span>
                        </a>
                        <div class="absolute left-0 top-full w-64 bg-white shadow-lg rounded-lg py-3 hidden group-hover:block z-40">
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1 hover:text-primary transition-colors">
                                <i class="fa fa-laptop mr-2"></i>电子产品
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1 hover:text-primary transition-colors">
                                <i class="fa fa-mobile mr-2"></i>手机通讯
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1 hover:text-primary transition-colors">
                                <i class="fa fa-clock-o mr-2"></i>钟表首饰
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1 hover:text-primary transition-colors">
                                <i class="fa fa-tshirt mr-2"></i>服装鞋帽
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1 hover:text-primary transition-colors">
                                <i class="fa fa-home mr-2"></i>家居用品
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1 hover:text-primary transition-colors">
                                <i class="fa fa-gift mr-2"></i>礼品箱包
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1 hover:text-primary transition-colors">
                                <i class="fa fa-book mr-2"></i>图书音像
                            </a>
                        </div>
                    </li>
                    <li class="category-item"><a href="#" class="text-dark hover:text-primary transition-colors">首页</a></li>
                    <li class="category-item"><a href="#" class="text-dark hover:text-primary transition-colors">限时秒杀</a></li>
                    <li class="category-item"><a href="#" class="text-dark hover:text-primary transition-colors">新品上市</a></li>
                    <li class="category-item"><a href="#" class="text-dark hover:text-primary transition-colors">热卖榜单</a></li>
                    <li class="category-item"><a href="#" class="text-dark hover:text-primary transition-colors">品牌专区</a></li>
                    <li class="category-item"><a href="#" class="text-dark hover:text-primary transition-colors">优惠券</a></li>
                    <li class="category-item"><a href="#" class="text-dark hover:text-primary transition-colors">客户服务</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <!-- 轮播图区域 -->
        <section class="py-4">
            <div class="container mx-auto px-4">
                <div class="relative rounded-xl overflow-hidden shadow-md h-[200px] md:h-[400px]">
                    <div id="carousel" class="flex transition-transform duration-500 ease-in-out h-full">
                        <div class="min-w-full h-full">
                            <img src="images/banner1.jpg" alt="夏季新品促销" class="w-full h-full object-cover">
                        </div>
                        <div class="min-w-full h-full">
                            <img src="images/banner2.jpg" alt="电子产品特惠" class="w-full h-full object-cover">
                        </div>
                        <div class="min-w-full h-full">
                            <img src="images/banner3.jpg" alt="限时折扣活动" class="w-full h-full object-cover">
                        </div>
                    </div>
                    <button id="prev-btn" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                        <i class="fa fa-angle-left text-xl"></i>
                    </button>
                    <button id="next-btn" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                        <i class="fa fa-angle-right text-xl"></i>
                    </button>
                    <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
                        <button class="carousel-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-colors active"></button>
                        <button class="carousel-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-colors"></button>
                        <button class="carousel-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-colors"></button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 分类导航区域 -->
        <section class="py-6 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-2xl font-bold mb-6 text-center">热门分类</h2>
                <div class="grid grid-cols-4 md:grid-cols-8 gap-4">
                    <a href="#" class="flex flex-col items-center text-center group">
                        <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-2 group-hover:bg-primary/20 transition-colors">
                            <i class="fa fa-laptop text-primary text-xl"></i>
                        </div>
                        <span class="text-sm">电子产品</span>
                    </a>
                    <a href="#" class="flex flex-col items-center text-center group">
                        <div class="w-16 h-16 rounded-full bg-secondary/10 flex items-center justify-center mb-2 group-hover:bg-secondary/20 transition-colors">
                            <i class="fa fa-mobile text-secondary text-xl"></i>
                        </div>
                        <span class="text-sm">手机通讯</span>
                    </a>
                    <a href="#" class="flex flex-col items-center text-center group">
                        <div class="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mb-2 group-hover:bg-success/20 transition-colors">
                            <i class="fa fa-clock-o text-success text-xl"></i>
                        </div>
                        <span class="text-sm">钟表首饰</span>
                    </a>
                    <a href="#" class="flex flex-col items-center text-center group">
                        <div class="w-16 h-16 rounded-full bg-danger/10 flex items-center justify-center mb-2 group-hover:bg-danger/20 transition-colors">
                            <i class="fa fa-tshirt text-danger text-xl"></i>
                        </div>
                        <span class="text-sm">服装鞋帽</span>
                    </a>
                    <a href="#" class="flex flex-col items-center text-center group">
                        <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-2 group-hover:bg-primary/20 transition-colors">
                            <i class="fa fa-home text-primary text-xl"></i>
                        </div>
                        <span class="text-sm">家居用品</span>
                    </a>
                    <a href="#" class="flex flex-col items-center text-center group">
                        <div class="w-16 h-16 rounded-full bg-secondary/10 flex items-center justify-center mb-2 group-hover:bg-secondary/20 transition-colors">
                            <i class="fa fa-gift text-secondary text-xl"></i>
                        </div>
                        <span class="text-sm">礼品箱包</span>
                    </a>
                    <a href="#" class="flex flex-col items-center text-center group">
                        <div class="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mb-2 group-hover:bg-success/20 transition-colors">
                            <i class="fa fa-book text-success text-xl"></i>
                        </div>
                        <span class="text-sm">图书音像</span>
                    </a>
                    <a href="#" class="flex flex-col items-center text-center group">
                        <div class="w-16 h-16 rounded-full bg-danger/10 flex items-center justify-center mb-2 group-hover:bg-danger/20 transition-colors">
                            <i class="fa fa-cutlery text-danger text-xl"></i>
                        </div>
                        <span class="text-sm">食品饮料</span>
                    </a>
                </div>
            </div>
        </section>

        <!-- 限时秒杀区域 -->
        <section class="py-8 bg-light-1">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold">限时秒杀</h2>
                    <div class="flex items-center space-x-1">
                        <span class="text-danger font-medium">剩余时间:</span>
                        <div class="bg-dark text-white px-1 py-0.5 rounded text-sm">08</div>
                        <span class="text-dark">:</span>
                        <div class="bg-dark text-white px-1 py-0.5 rounded text-sm">45</div>
                        <span class="text-dark">:</span>
                        <div class="bg-dark text-white px-1 py-0.5 rounded text-sm">33</div>
                    </div>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                    <!-- 商品卡片 1 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
                        <div class="relative">
                            <img src="images/product1.jpg" alt="限时秒杀商品1" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2 bg-danger text-white text-xs py-1 px-2 rounded">
                                -30%
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">2025新款智能手表 运动监测 心率血氧睡眠监测</h3>
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="text-danger font-bold">¥299</span>
                                    <span class="text-light-3 text-xs line-through ml-1">¥499</span>
                                </div>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    立即抢购
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 商品卡片 2 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
                        <div class="relative">
                            <img src="images/product2.jpg" alt="限时秒杀商品2" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2 bg-danger text-white text-xs py-1 px-2 rounded">
                                -25%
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">无线蓝牙耳机 高清通话 主动降噪 超长续航</h3>
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="text-danger font-bold">¥199</span>
                                    <span class="text-light-3 text-xs line-through ml-1">¥299</span>
                                </div>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    立即抢购
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 商品卡片 3 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
                        <div class="relative">
                            <img src="images/product3.jpg" alt="限时秒杀商品3" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2 bg-danger text-white text-xs py-1 px-2 rounded">
                                -40%
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">多功能料理机 榨汁机 搅拌机 家用厨房电器</h3>
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="text-danger font-bold">¥399</span>
                                    <span class="text-light-3 text-xs line-through ml-1">¥699</span>
                                </div>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    立即抢购
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 商品卡片 4 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover hidden md:block">
                        <div class="relative">
                            <img src="images/product4.jpg" alt="限时秒杀商品4" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2 bg-danger text-white text-xs py-1 px-2 rounded">
                                -20%
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">超薄笔记本电脑 14英寸全面屏 办公游戏本</h3>
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="text-danger font-bold">¥3499</span>
                                    <span class="text-light-3 text-xs line-through ml-1">¥4299</span>
                                </div>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    立即抢购
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 商品卡片 5 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover hidden md:block">
                        <div class="relative">
                            <img src="images/product5.jpg" alt="限时秒杀商品5" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2 bg-danger text-white text-xs py-1 px-2 rounded">
                                -35%
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">智能扫地机器人 自动导航 吸拖一体 语音控制</h3>
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="text-danger font-bold">¥1299</span>
                                    <span class="text-light-3 text-xs line-through ml-1">¥1999</span>
                                </div>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    立即抢购
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 新品上市区域 -->
        <section class="py-8 bg-white">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold">新品上市</h2>
                    <a href="#" class="text-primary hover:underline">查看全部 <i class="fa fa-angle-right ml-1"></i></a>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <!-- 新品卡片 1 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-light-2 card-hover">
                        <div class="relative">
                            <img src="images/new1.jpg" alt="新品1" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2 bg-primary text-white text-xs py-1 px-2 rounded">
                                新品
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="flex items-center mb-1">
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star-half-o text-warning text-xs"></i>
                                </div>
                                <span class="text-xs text-light-3 ml-1">(128)</span>
                            </div>
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">专业摄影相机 高清拍照 4K视频录制 可换镜头</h3>
                            <div class="flex items-center justify-between">
                                <span class="text-danger font-bold">¥3499</span>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-shopping-cart mr-1"></i>加入购物车
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 新品卡片 2 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-light-2 card-hover">
                        <div class="relative">
                            <img src="images/new2.jpg" alt="新品2" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2 bg-primary text-white text-xs py-1 px-2 rounded">
                                新品
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="flex items-center mb-1">
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                </div>
                                <span class="text-xs text-light-3 ml-1">(86)</span>
                            </div>
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">智能手表 健康监测 运动追踪 血氧心率检测</h3>
                            <div class="flex items-center justify-between">
                                <span class="text-danger font-bold">¥1299</span>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-shopping-cart mr-1"></i>加入购物车
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 新品卡片 3 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-light-2 card-hover">
                        <div class="relative">
                            <img src="images/new3.jpg" alt="新品3" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2 bg-primary text-white text-xs py-1 px-2 rounded">
                                新品
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="flex items-center mb-1">
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star-o text-warning text-xs"></i>
                                </div>
                                <span class="text-xs text-light-3 ml-1">(42)</span>
                            </div>
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">无线机械键盘 RGB背光 青轴/红轴可选 游戏办公</h3>
                            <div class="flex items-center justify-between">
                                <span class="text-danger font-bold">¥399</span>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-shopping-cart mr-1"></i>加入购物车
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 新品卡片 4 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-light-2 card-hover">
                        <div class="relative">
                            <img src="images/new4.jpg" alt="新品4" class="w-full h-48 object-cover">
                            <div class="absolute top-2 left-2 bg-primary text-white text-xs py-1 px-2 rounded">
                                新品
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="flex items-center mb-1">
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star-half-o text-warning text-xs"></i>
                                </div>
                                <span class="text-xs text-light-3 ml-1">(59)</span>
                            </div>
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">便携式蓝牙音箱 重低音 防水设计 户外音响</h3>
                            <div class="flex items-center justify-between">
                                <span class="text-danger font-bold">¥249</span>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-shopping-cart mr-1"></i>加入购物车
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 热卖榜单区域 -->
        <section class="py-8 bg-light-1">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold">热卖榜单</h2>
                    <div class="flex space-x-2">
                        <button class="hot-sales-tab bg-primary text-white text-sm py-1 px-3 rounded">全部</button>
                        <button class="hot-sales-tab bg-white text-dark-2 text-sm py-1 px-3 rounded hover:bg-light-2 transition-colors">电子产品</button>
                        <button class="hot-sales-tab bg-white text-dark-2 text-sm py-1 px-3 rounded hover:bg-light-2 transition-colors">家居用品</button>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <!-- 热卖商品 1 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm flex card-hover">
                        <div class="relative w-1/3">
                            <div class="absolute top-0 left-0 bg-danger text-white w-6 h-6 flex items-center justify-center font-bold">1</div>
                            <img src="images/hot1.jpg" alt="热卖商品1" class="w-full h-full object-cover">
                        </div>
                        <div class="w-2/3 p-3">
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">2025款旗舰智能手机 6.7英寸大屏 128G/256G可选</h3>
                            <div class="flex items-center mb-2">
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                </div>
                                <span class="text-xs text-light-3 ml-1">(1286)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-danger font-bold">¥4299</span>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-shopping-cart mr-1"></i>加入购物车
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 热卖商品 2 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm flex card-hover">
                        <div class="relative w-1/3">
                            <div class="absolute top-0 left-0 bg-danger text-white w-6 h-6 flex items-center justify-center font-bold">2</div>
                            <img src="images/hot2.jpg" alt="热卖商品2" class="w-full h-full object-cover">
                        </div>
                        <div class="w-2/3 p-3">
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">超薄笔记本电脑 14英寸全面屏 办公游戏本 酷睿i5</h3>
                            <div class="flex items-center mb-2">
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star-half-o text-warning text-xs"></i>
                                </div>
                                <span class="text-xs text-light-3 ml-1">(952)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-danger font-bold">¥3799</span>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-shopping-cart mr-1"></i>加入购物车
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 热卖商品 3 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm flex card-hover">
                        <div class="relative w-1/3">
                            <div class="absolute top-0 left-0 bg-danger text-white w-6 h-6 flex items-center justify-center font-bold">3</div>
                            <img src="images/hot3.jpg" alt="热卖商品3" class="w-full h-full object-cover">
                        </div>
                        <div class="w-2/3 p-3">
                            <h3 class="text-sm font-medium line-clamp-2 h-10 mb-2">无线蓝牙耳机 主动降噪 高清通话 超长续航 触控操作</h3>
                            <div class="flex items-center mb-2">
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star-o text-warning text-xs"></i>
                                </div>
                                <span class="text-xs text-light-3 ml-1">(876)</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-danger font-bold">¥299</span>
                                <button class="add-to-cart-btn bg-primary text-white text-xs py-1 px-3 rounded hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-shopping-cart mr-1"></i>加入购物车
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 品牌专区 -->
        <section class="py-8 bg-white">
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold">品牌专区</h2>
                    <a href="#" class="text-primary hover:underline">更多品牌 <i class="fa fa-angle-right ml-1"></i></a>
                </div>
                <div class="grid grid-cols-3 md:grid-cols-6 gap-4">
                    <a href="#" class="bg-light-1 rounded-lg p-4 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
                        <span class="text-lg font-bold">Apple</span>
                    </a>
                    <a href="#" class="bg-light-1 rounded-lg p-4 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
                        <span class="text-lg font-bold">Samsung</span>
                    </a>
                    <a href="#" class="bg-light-1 rounded-lg p-4 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
                        <span class="text-lg font-bold">Huawei</span>
                    </a>
                    <a href="#" class="bg-light-1 rounded-lg p-4 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
                        <span class="text-lg font-bold">Xiaomi</span>
                    </a>
                    <a href="#" class="bg-light-1 rounded-lg p-4 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
                        <span class="text-lg font-bold">Dell</span>
                    </a>
                    <a href="#" class="bg-light-1 rounded-lg p-4 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
                        <span class="text-lg font-bold">Sony</span>
                    </a>
                </div>
            </div>
        </section>

        <!-- 用户评价区域 -->
        <section class="py-8 bg-light-1">
            <div class="container mx-auto px-4">
                <h2 class="text-2xl font-bold text-center mb-6">用户评价</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <!-- 评价卡片 1 -->
                    <div class="bg-white rounded-lg p-4 shadow-sm">
                        <div class="flex items-center mb-3">
                            <img src="images/user1.jpg" alt="用户头像" class="w-12 h-12 rounded-full object-cover">
                            <div class="ml-3">
                                <h4 class="font-medium">张小明</h4>
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                </div>
                            </div>
                        </div>
                        <p class="text-sm text-dark-2 mb-3">这款笔记本电脑的性能真的超出了我的预期，轻薄便携，续航也很长，非常适合我这种经常需要移动办公的人。客服态度也很好，解答问题很专业。</p>
                        <div class="flex space-x-2 mb-2">
                            <img src="images/review1.jpg" alt="评价图片1" class="w-16 h-16 object-cover rounded">
                            <img src="images/review2.jpg" alt="评价图片2" class="w-16 h-16 object-cover rounded">
                        </div>
                        <p class="text-xs text-light-3">2025-05-12</p>
                    </div>

                    <!-- 评价卡片 2 -->
                    <div class="bg-white rounded-lg p-4 shadow-sm">
                        <div class="flex items-center mb-3">
                            <img src="images/user2.jpg" alt="用户头像" class="w-12 h-12 rounded-full object-cover">
                            <div class="ml-3">
                                <h4 class="font-medium">李小华</h4>
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star-half-o text-warning text-xs"></i>
                                </div>
                            </div>
                        </div>
                        <p class="text-sm text-dark-2 mb-3">耳机音质很好，降噪效果也不错，佩戴舒适，长时间使用也不会感到不适。唯一不足的是电池续航没有宣传的那么长，不过总体来说还是很满意的。</p>
                        <div class="flex space-x-2 mb-2">
                            <img src="images/review3.jpg" alt="评价图片3" class="w-16 h-16 object-cover rounded">
                        </div>
                        <p class="text-xs text-light-3">2025-05-20</p>
                    </div>

                    <!-- 评价卡片 3 -->
                    <div class="bg-white rounded-lg p-4 shadow-sm">
                        <div class="flex items-center mb-3">
                            <img src="images/user3.jpg" alt="用户头像" class="w-12 h-12 rounded-full object-cover">
                            <div class="ml-3">
                                <h4 class="font-medium">王大锤</h4>
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star-o text-warning text-xs"></i>
                                </div>
                            </div>
                        </div>
                        <p class="text-sm text-dark-2 mb-3">手机拍照效果非常好，特别是夜景模式，很清晰。运行速度也很快，玩游戏不卡顿。唯一缺点是充电有点慢，希望后续可以改进。</p>
                        <div class="flex space-x-2 mb-2">
                            <img src="images/review4.jpg" alt="评价图片4" class="w-16 h-16 object-cover rounded">
                            <img src="images/review5.jpg" alt="评价图片5" class="w-16 h-16 object-cover rounded">
                            <img src="images/review6.jpg" alt="评价图片6" class="w-16 h-16 object-cover rounded">
                        </div>
                        <p class="text-xs text-light-3">2025-06-02</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 购物指南 -->
        <section class="py-8 bg-white">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                            <i class="fa fa-shield text-primary text-2xl"></i>
                        </div>
                        <h3 class="font-medium mb-2">品质保障</h3>
                        <p class="text-sm text-dark-2">所有商品均为正品行货，提供正规发票和售后服务</p>
                    </div>
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                            <i class="fa fa-truck text-primary text-2xl"></i>
                        </div>
                        <h3 class="font-medium mb-2">快速配送</h3>
                        <p class="text-sm text-dark-2">全国大部分地区支持次日达，部分城市支持当日达</p>
                    </div>
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                            <i class="fa fa-refresh text-primary text-2xl"></i>
                        </div>
                        <h3 class="font-medium mb-2">7天无理由退换</h3>
                        <p class="text-sm text-dark-2">收货后7天内，商品完好可无理由办理退换货</p>
                    </div>
                    <div class="flex flex-col items-center text-center">
                        <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                            <i class="fa fa-headphones text-primary text-2xl"></i>
                        </div>
                        <h3 class="font-medium mb-2">24小时客服</h3>
                        <p class="text-sm text-dark-2">专业客服团队，7×24小时在线为您服务</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-12 pb-6">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">关于我们</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">公司简介</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">招贤纳士</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">隐私政策</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">帮助中心</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">购物指南</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">支付方式</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">配送说明</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">售后服务</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">关注我们</h3>
                    <div class="flex space-x-4 mb-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                    <p class="text-light-3">扫描二维码，下载APP</p>
                    <div class="mt-2 bg-white p-1 inline-block rounded">
                        <img src="images/qrcode.jpg" alt="APP下载二维码" class="w-24 h-24">
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">联系方式</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-primary"></i>
                            <span class="text-light-3">广鸡</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3 text-primary"></i>
                            <span class="text-light-3">400-888-8888</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-primary"></i>
                            <span class="text-light-3">service@shoppingease.com</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-clock-o mr-3 text-primary"></i>
                            <span class="text-light-3">周一至周日 9:00-22:00</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-dark-2 pt-6 text-center text-light-3 text-sm">
                <p>© 2025 ShoppingEase 轻松购物平台 版权所有 京ICP备12345678号-1</p>
            </div>
        </div>
    </footer>

    <!-- 登录模态框 -->
    <div id="login-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg w-full max-w-md mx-4 overflow-hidden">
            <div class="flex justify-between items-center p-4 border-b">
                <h3 class="text-lg font-bold">用户登录</h3>
                <button id="close-login-modal" class="text-light-3 hover:text-dark transition-colors">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="login-form">
                    <div class="mb-4">
                        <label for="login-username" class="block text-sm font-medium mb-1">用户名/手机号</label>
                        <input type="text" id="login-username" class="w-full px-3 py-2 border border-light-2 rounded focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="请输入用户名或手机号">
                    </div>
                    <div class="mb-4">
                        <label for="login-password" class="block text-sm font-medium mb-1">密码</label>
                        <input type="password" id="login-password" class="w-full px-3 py-2 border border-light-2 rounded focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="请输入密码">
                    </div>
                    <div class="flex items-center justify-between mb-6">
                        <label class="flex items-center">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                            <span class="ml-2 text-sm text-dark-2">记住我</span>
                        </label>
                        <a href="#" class="text-sm text-primary hover:underline">忘记密码？</a>
                    </div>
                    <button type="submit" class="w-full bg-primary text-white py-2 rounded hover:bg-primary/90 transition-colors">登录</button>
                </form>
                <div class="mt-4 text-center">
                    <span class="text-sm text-dark-2">还没有账号？</span>
                    <a href="register.html" class="text-sm text-primary hover:underline">立即注册</a>
                </div>
                <div class="mt-6">
                    <div class="relative flex items-center">
                        <div class="flex-grow border-t border-light-2"></div>
                        <span class="flex-shrink mx-4 text-sm text-light-3">其他登录方式</span>
                        <div class="flex-grow border-t border-light-2"></div>
                    </div>
                    <div class="flex justify-center space-x-6 mt-4">
                        <a href="#" class="text-dark-2 hover:text-primary transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-dark-2 hover:text-primary transition-colors">
                            <i class="fa fa-qq text-xl"></i>
                        </a>
                        <a href="#" class="text-dark-2 hover:text-primary transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 加入购物车成功提示 -->
    <div id="cart-toast" class="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-dark text-white px-6 py-3 rounded-lg shadow-lg hidden z-50">
        <div class="flex items-center">
            <i class="fa fa-check-circle text-success mr-2"></i>
            <span>商品已成功加入购物车</span>
        </div>
    </div>

    <script src="js/main.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/cart.js"></script>
    
</body>
</html>    